<template>
  <el-card shadow="always" :body-style="{ padding: '20px' }">
    <div class="header" style="width: 100%">
      <span class="header-title"> 项目缺勤率统计 </span>
    </div>
    <el-row :gutter="20">
      <el-col :span="24" :offset="0">
        <div id="statisticsChart" :style="{ height, width }" />
      </el-col>
    </el-row>
    <!-- card body -->
  </el-card>

  <div></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";

const props = defineProps({
  groupNames: {
    type: Array<String>,
    default() {
      return [];
    },
  },
  absenceFromDutyRate: {
    type: Array<number>,
    default() {
      return [];
    },
  },
});
const width = "100%";
const height = "400px";

// 初始化图表
const initChart = () => {
  let groupNames = ref(props.groupNames);
  let absenceFromDutyRate = ref<number[]>(props.absenceFromDutyRate);
  let data = groupNames.value.map((item, index) => {
    return {
      name: item,
      value: absenceFromDutyRate.value[index] * 100,
    };
  });
  let options = {
    legend: {
      bottom: 0,
      right: 0,
      orient: "vertical",
    },
    series: {
      name: "Nightingale Chart",
      type: "pie",
      minAngle: 10,
      label: {
        show: true,
        fontSize: "16",
        fontWeight: "bold",
        position: "inner",
        formatter: "{c}%",
        textStyle: {
          color: "#fff",
        },
      },
      avoidLabelOverlap: false,
      itemStyle: {
        //通过设置边框宽度，并给边框设置背景同色来表示扇形直接的间隔距离
        normal: {
          borderWidth: 1,
          borderColor: "#fff",
        },
      },
      data: data,
    },
  };
  let chart = echarts.init(
    document.getElementById("statisticsChart") as HTMLDivElement
  );
  chart.setOption(options);
};

onUpdated(() => {
  initChart();
});
</script>

<style lang="scss" scoped>
.pt20 {
  padding-top: 20px;
}

.header-title {
  font-size: 16px;
  color: #101010;
  font-weight: 600;
}

.header-description {
  font-size: 14px;
  color: #a3a3a3;
}
</style>
